<template>
  <view class="teacher-apply-container">
    <!-- 顶部提示 -->
    <view class="tips-banner">
      <u-icon name="info-circle-fill" size="32" color="#5daf34"></u-icon>
      <text class="tips-text">成为教员，开启您的教学之旅</text>
    </view>

    <!-- 基本信息 -->
    <view class="form-section card">
      <view class="section-header">
        <view class="header-icon">
          <u-icon name="account-fill" size="36" color="#5daf34"></u-icon>
        </view>
        <text class="section-title">基本信息</text>
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">真实姓名</text>
          <text class="required-star">*</text>
        </view>
        <input 
          class="item-input" 
          v-model="form.realName" 
          placeholder="请输入真实姓名"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">学历</text>
          <text class="required-star">*</text>
        </view>
        <picker :range="educationOptions" :value="educationIndex" @change="handleEducationChange">
          <view class="picker-display">
            <text :class="{ placeholder: !form.education }">{{ form.education || '请选择学历' }}</text>
            <u-icon name="arrow-down" size="20" color="#999"></u-icon>
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">毕业院校</text>
          <text class="required-star">*</text>
        </view>
        <input 
          class="item-input" 
          v-model="form.school" 
          placeholder="如：北京大学"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">专业</text>
        </view>
        <input 
          class="item-input" 
          v-model="form.major" 
          placeholder="如：计算机科学与技术"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">教学经验</text>
          <text class="required-star">*</text>
        </view>
        <view class="input-with-unit">
          <input 
            class="item-input flex-input" 
            v-model="form.experience" 
            placeholder="0"
            type="number"
            placeholder-class="input-placeholder"
          />
          <text class="input-unit">年</text>
        </view>
      </view>
    </view>
    
    <!-- 教学信息 -->
    <view class="form-section card">
      <view class="section-header">
        <view class="header-icon">
          <u-icon name="man-add-fill" size="36" color="#5daf34"></u-icon>
        </view>
        <text class="section-title">教学信息</text>
      </view>
      
      <view class="form-item subjects-item">
        <view class="item-label">
          <text class="label-text">擅长科目</text>
          <text class="required-star">*</text>
        </view>
        <view class="subjects-grid">
          <view 
            class="subject-tag"
            :class="{ active: form.subjects.includes(subject) }"
            v-for="subject in subjectOptions"
            :key="subject"
            @click="toggleSubject(subject)"
          >
            {{ subject }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text class="label-text">期望时薪</text>
          <text class="required-star">*</text>
        </view>
        <view class="input-with-unit">
          <input 
            class="item-input flex-input" 
            v-model="form.hourlyRate" 
            placeholder="100"
            type="number"
            placeholder-class="input-placeholder"
          />
          <text class="input-unit">元/小时</text>
        </view>
      </view>
      
      <view class="form-item textarea-item">
        <view class="item-label">
          <text class="label-text">自我介绍</text>
          <text class="required-star">*</text>
        </view>
        <textarea 
          class="item-textarea"
          v-model="form.introduction"
          placeholder="请介绍您的教学经验、教学风格、擅长领域等，让家长更了解您（不超过500字）"
          maxlength="500"
          placeholder-class="input-placeholder"
        ></textarea>
        <view class="char-count">
          <text>{{ form.introduction.length }}/500</text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <button 
        class="submit-btn"
        :class="{ loading: loading }"
        :disabled="loading"
        @click="submitApplication"
      >
        <u-icon v-if="loading" name="loading" size="24" color="#fff" :custom-style="{ marginRight: '12rpx' }"></u-icon>
        <text>{{ loading ? '提交中...' : '提交申请' }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import { applyTeacher } from '@/api/user'

export default {
  data() {
    return {
      form: {
        realName: '',
        education: '',
        school: '',
        major: '',
        experience: '',
        subjects: [],
        hourlyRate: '',
        introduction: ''
      },
      educationOptions: ['本科', '硕士', '博士', '其他'],
      subjectOptions: ['数学', '英语', '物理', '化学', '语文', '生物', '历史', '地理'],
      educationIndex: -1,
      loading: false
    }
  },
  
  methods: {
    handleEducationChange(e) {
      this.educationIndex = e.detail.value
      this.form.education = this.educationOptions[e.detail.value]
    },
    
    toggleSubject(subject) {
      const index = this.form.subjects.indexOf(subject)
      if (index > -1) {
        this.form.subjects.splice(index, 1)
      } else {
        this.form.subjects.push(subject)
      }
    },
    
    async submitApplication() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      
      try {
        // 构建提交数据
        const data = {
          realName: this.form.realName,
          education: this.form.education,
          school: this.form.school,
          subjects: JSON.stringify(this.form.subjects), // 转换为JSON字符串
          experienceYears: parseInt(this.form.experience),
          hourlyRate: parseFloat(this.form.hourlyRate),
          intro: this.form.introduction
        }
        
        console.log('提交教员申请数据:', data)
        
        // 1. 调用API更新用户资料
        const res = await applyTeacher(data)
        
        if (res.code === 200) {
          // 2. 同时提交身份认证申请（创建待审核记录）
          try {
            const { submitIdentity } = require('@/api/user')
            const identityData = {
              idNumber: null,      // 身份证号暂时不填
              idFrontPath: null,   // 身份证正面照片暂时不填
              idBackPath: null,    // 身份证背面照片暂时不填
              selfiePath: null,    // 手持身份证照片暂时不填
              certificates: []     // 资质证书暂时不填
            }
            
            const identityRes = await submitIdentity(identityData)
            if (identityRes.code === 200) {
              console.log('身份认证记录创建成功')
            }
          } catch (identityError) {
            // 如果是重复提交错误，忽略
            if (identityError.message && identityError.message.includes('已提交')) {
              console.log('身份认证已存在，跳过创建')
            } else {
              console.warn('提交身份认证失败（不影响资料保存）:', identityError)
            }
          }
          
          // 显示成功提示
          uni.showModal({
            title: '申请提交成功',
            content: '您的教员申请已提交，我们会尽快审核。审核通过后您就可以接单了！',
            showCancel: false,
            success: () => {
              uni.switchTab({
                url: '/pages/user/profile'
              })
            }
          })
        } else {
          throw new Error(res.message || '提交失败')
        }
        
      } catch (error) {
        console.error('提交教员申请失败:', error)
        uni.showToast({
          title: error.message || '提交失败，请重试',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },
    
    validateForm() {
      if (!this.form.realName) {
        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
        return false
      }
      if (!this.form.education) {
        uni.showToast({ title: '请选择学历', icon: 'none' })
        return false
      }
      if (!this.form.school) {
        uni.showToast({ title: '请输入毕业院校', icon: 'none' })
        return false
      }
      if (!this.form.experience) {
        uni.showToast({ title: '请输入教学经验', icon: 'none' })
        return false
      }
      if (!this.form.subjects.length) {
        uni.showToast({ title: '请选择擅长科目', icon: 'none' })
        return false
      }
      if (!this.form.hourlyRate) {
        uni.showToast({ title: '请输入期望时薪', icon: 'none' })
        return false
      }
      if (!this.form.introduction) {
        uni.showToast({ title: '请输入自我介绍', icon: 'none' })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-apply-container {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 180rpx;
}

.tips-banner {
  display: flex;
  align-items: center;
  gap: 16rpx;
  background: linear-gradient(135deg, #e8f5e9, #f1f8f4);
  padding: 24rpx 30rpx;
  margin: 30rpx;
  border-radius: 16rpx;
  border-left: 6rpx solid #5daf34;

  .tips-text {
    font-size: 28rpx;
    color: #5daf34;
    font-weight: 500;
  }
}

.form-section {
  background: white;
  margin: 0 30rpx 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding-bottom: 24rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .header-icon {
      width: 70rpx;
      height: 70rpx;
      background: linear-gradient(135deg, rgba(93, 175, 52, 0.1), rgba(124, 179, 66, 0.1));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
    }

    .section-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.form-item {
  margin-bottom: 36rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .item-label {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .label-text {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .required-star {
      color: #ff6b6b;
      margin-left: 8rpx;
      font-size: 32rpx;
      line-height: 1;
    }
  }

  .item-input {
    width: 100%;
    height: 88rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    border: 2rpx solid transparent;
    transition: all 0.3s;

    &:focus {
      background: white;
      border-color: #5daf34;
    }
  }
  
  .flex-input {
    flex: 1;
  }

  .input-placeholder {
    color: #bbb;
  }

  .picker-display {
    height: 88rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;

    .placeholder {
      color: #bbb;
    }

    text {
      color: #333;
    }
  }

  .input-with-unit {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .input-unit {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      min-width: 100rpx;
      text-align: right;
    }
  }
}

.subjects-item {
  .subjects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .subject-tag {
      padding: 16rpx 32rpx;
      background: #f8f8f8;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #666;
      border: 2rpx solid #e8e8e8;
      transition: all 0.3s;

      &.active {
        background: linear-gradient(135deg, #5daf34, #7cb342);
        color: white;
        border-color: #5daf34;
        box-shadow: 0 4rpx 16rpx rgba(93, 175, 52, 0.3);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}

.textarea-item {
  .item-textarea {
    width: 100%;
    min-height: 300rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    border: 2rpx solid transparent;
    transition: all 0.3s;

    &:focus {
      background: white;
      border-color: #5daf34;
    }
  }

  .char-count {
    text-align: right;
    margin-top: 12rpx;

    text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.submit-section {
  padding: 0 30rpx;
  margin-top: 40rpx;

  .submit-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #5daf34, #7cb342);
    border: none;
    border-radius: 50rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 32rpx rgba(93, 175, 52, 0.35);
    transition: all 0.3s;

    &:active:not(.loading) {
      transform: scale(0.98);
      box-shadow: 0 4rpx 20rpx rgba(93, 175, 52, 0.25);
    }

    &.loading {
      opacity: 0.7;
    }
  }
}
</style> 